<template>
  <div style="backgroundcolor: white; height: 100%">
    <div class="block">
      <span class="demonstration">7天</span>
      <el-date-picker
        @change="handleChange"
        :editable="false"
        v-model="time"
        type="date"
        placeholder="选择结束日期"
      >
      </el-date-picker>
    </div>
    <el-row style="height: 100%" type="flex">
      <div ref="one" style="width: 100%"></div>
    </el-row>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { mapState, mapActions } from "vuex";
export default {
  name: "indexNav",
  data() {
    return { 
      time: "", // 当前选择的时间
      location: "11", // 测试
    };
  },
  created() {
  },
  mounted() {
    // 数据请求成功之后渲染
    // 请求数据
    //console.log("发送请求");
    // 默认当前时间
    this.time = new Date()
    // 传入回调函数在数据获取之后再进行渲染
    let data = { cur_day: Number(this.time), cb: this.paint };
    this.PublicNumDaily(data);
  },
  computed: {
    ...mapState(["PublicDateList"]),
  },
  methods: {
    ...mapActions(["PublicNumDaily"]),
    handleChange: function () {
      // 设计回调函数，在数据加载完成之后执行函数,这里需要注意action只能传一个参数，所以要把回调函数包装进去
      let data = {
        cur_day: Number(this.time),
        cb: this.paint,
      };
      this.PublicNumDaily(data);
    },
    paint: function () {
      console.log("hhhh,我是回调函数", this.location);
      if (!Object.keys(this.PublicDateList).length) return;
      let X = Object.keys(this.PublicDateList).length;
      let pasList = [];
      let visitedList = [];
      let starsList = [];
      let temp = this.PublicDateList;
      for (let item in temp) {
        pasList.push(temp[item].pas);
        visitedList.push(temp[item].visited);
        starsList.push(temp[item].stars);
      }
      console.log(starsList);
      //console.log('这是',Object.keys(this.PublicDateList))
      //console.log('这是',Object.values(this.PublicDateList))
      const { one, two } = this.$refs;
      var myChart = echarts.init(one);
      var option;

      option = {
        color: ["#00DDFF", "#37A2FF", "#FFBF00"],
        title: {
          text: "文章数据统计",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        legend: {
          x: "center",
          y: "bottom",
          icon: "rect",
          itemWidth: 16,
          itemHeight: 16,
          data: ["文章发布数量", "访问数量", "star数量"],
        },
        // 图例与图标的距离
        /*  grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      }, */
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: Object.keys(this.PublicDateList),
        },
        yAxis: {},
        series: [
          {
            name: "文章发布数量",
            type: "line",
            stack: "总量",
            smooth: true,
            lineStyle: {
              width: 0,
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(128, 255, 165)",
                },
                {
                  offset: 1,
                  color: "rgba(1, 191, 236)",
                },
              ]),
            },
            emphasis: {
              focus: "series",
            },
            data: pasList,
          },
          {
            name: "访问数量",
            type: "line",
            stack: "总量",
            smooth: true,
            lineStyle: {
              width: 0,
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(55, 162, 255)",
                },
                {
                  offset: 1,
                  color: "rgba(116, 21, 219)",
                },
              ]),
            },
            emphasis: {
              focus: "series",
            },
            data: visitedList,
          },
          {
            name: "star数量",
            type: "line",
            stack: "总量",
            smooth: true,
            lineStyle: {
              width: 0,
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(255, 191, 0)",
                },
                {
                  offset: 1,
                  color: "rgba(224, 62, 76)",
                },
              ]),
            },
            emphasis: {
              focus: "series",
            },
            data: starsList,
          },
        ],
      };

      option && myChart.setOption(option);
    },
  },
};
</script>

<style scoped>
.block {
  margin-bottom: 10px;
}
.demonstration {
  margin-left: 5px;
  margin-right: 30px;
}
</style>
